<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <el-container>
          <el-aside
            width="300px"
            style="border: 1px solid #e2e2e2; padding: 10px"
          >
            <el-container>
              <el-header>
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="dicFilterText"
                  clearable
                ></el-input>
              </el-header>
              <el-main class="nopadding">
                <el-tree
                  ref="dic"
                  class="menu"
                  node-key="id"
                  :data="dicList"
                  :props="dicProps"
                  :highlight-current="true"
                  :expand-on-click-node="false"
                  :filter-node-method="dicFilterNode"
                  @node-click="dicClick"
                >
                  <template #default="{ node, data }">
                    <span class="custom-tree-node">
                      <span class="label">{{ node.label }}</span>
                      <span class="code">{{ data.code }}</span>
                      <span class="do">
                        <i class="el-icon-edit" @click.stop="dicEdit(data)"></i>
                        <i
                          class="el-icon-delete"
                          @click.stop="dicDel(node, data)"
                        ></i>
                      </span>
                    </span>
                  </template>
                </el-tree>
              </el-main>
              <el-footer style="height: 51px">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  style="width: 100%"
                  @click="addDic"
                  >字典分类</el-button
                >
              </el-footer>
            </el-container>
          </el-aside>
          <el-main>
            <el-container>
              <el-header>
                <div class="left-panel">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="addInfo"
                    size="small"
                    >添加字典</el-button
                  >
                </div>
              </el-header>
              <el-main class="nopadding">
                <el-table
                  :data="tableData"
                  style="width: 100%; margin-bottom: 20px"
                >
                  <el-table-column label="ID" prop="id"></el-table-column>
                  <el-table-column label="名称" prop="key"></el-table-column>
                  <el-table-column label="键值" prop="value"></el-table-column>
                  <el-table-column label="是否有效" prop="status">
                    <template #default="scope">
                      <span v-if="scope.row.status == 1">
                        <el-tag size="medium" type="success">有效</el-tag>
                      </span>
                      <span v-else
                        ><el-tag size="medium" type="danger">无效</el-tag></span
                      >
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="table_edit(scope.row, scope.$index)"
                        icon="el-icon-edit"
                        >编辑</el-button
                      >
                      <el-divider direction="vertical"></el-divider>
                      <el-popconfirm
                        title="确定删除吗？"
                        @confirm="table_del(scope.row, scope.$index)"
                      >
                        <template #reference>
                          <el-button
                            type="text"
                            size="small"
                            icon="el-icon-delete"
                            >删除</el-button
                          >
                        </template>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="page">
                  <el-pagination
                    :hide-on-single-page="page.total < page.size ? true : false"
                    background
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  >
                  </el-pagination>
                </div>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-card>
    </el-main>

    <dic-dialog
      v-if="dialog.dic"
      ref="dicDialog"
      @success="handleDicSuccess"
      @closed="dialog.dic = false"
    ></dic-dialog>

    <list-dialog
      v-if="dialog.list"
      ref="listDialog"
      @success="handleListSuccess"
      @closed="dialog.list = false"
    ></list-dialog>
  </el-container>
</template>

<script>
import dicDialog from "./dic";
import listDialog from "./list";

export default {
  name: "dic",
  components: {
    dicDialog,
    listDialog,
  },
  data() {
    return {
      dialog: {
        dic: false,
        list: false,
      },
      showDicloading: true,
      dicList: [],
      dicFilterText: "",
      dicProps: {
        label: "name",
        value: "id",
      },
      listApi: null,
      listApiParams: {},
      selection: [],
      tableData: [],
      page: {
        total: 0,
        currentPage: 1,
        size: 15,
        pageSizes: [15, 25, 35, 45],
      },
      search: {
        id: "",
        page: 1,
        pageSize: 15,
      },
    };
  },
  watch: {
    dicFilterText(val) {
      this.$refs.dic.filter(val);
    },
  },
  mounted() {
    this.getDic();
  },
  methods: {
    // 加载树数据
    async getDic() {
      let res = await this.$api.dict.tree.get();
      this.showDicloading = false;
      this.dicList = res.data;
      // 获取第一个节点,设置选中 & 加载明细列表
      var firstNode = this.dicList[0];
      if (firstNode) {
        this.$nextTick(() => {
          this.$refs.dic.setCurrentKey(firstNode.id);
        });

        this.search.id = firstNode.id;
        this.getDictTable();
      }
    },
    // 加载表格
    async getDictTable() {
      let dictInfo = await this.$api.dict.list.get(this.search);

      this.tableData = dictInfo.data.rows;
      this.page.total = dictInfo.data.total;
    },
    // 树过滤
    dicFilterNode(value, data) {
      if (!value) return true;
      var targetText = data.name + data.code;
      return targetText.indexOf(value) !== -1;
    },
    // 树增加
    addDic() {
      this.dialog.dic = true;
      this.$nextTick(() => {
        this.$refs.dicDialog.open();
      });
    },
    // 编辑树
    dicEdit(data) {
      this.dialog.dic = true;
      this.$nextTick(() => {
        var editNode = this.$refs.dic.getNode(data.id);
        this.$refs.dicDialog.open("edit").setData(editNode.data);
      });
    },
    // 树点击事件
    dicClick(data) {
      this.search.id = data.id;
      this.search.page = 1;
      this.getDictTable();
    },
    // 删除树
    dicDel(node, data) {
      this.$confirm(`确定删除 ${data.name} 项吗？`, "提示", {
        type: "warning",
      })
        .then(async () => {
          this.showDicloading = true;

          var res = await this.$api.dict.delcate.get({
            id: data.id,
          });

          this.showDicloading = false;
          if (res.code == 0) {
            this.$message.success(res.msg);
            this.getDic();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    // 添加明细
    addInfo() {
      this.dialog.list = true;
      this.$nextTick(() => {
        var dicCurrentKey = this.$refs.dic.getCurrentKey();
        const data = {
          cate_id: dicCurrentKey,
          status: 1,
        };
        this.$refs.listDialog.open().setData(data);
      });
    },
    // 编辑明细
    table_edit(row) {
      this.dialog.list = true;
      this.$nextTick(() => {
        this.$refs.listDialog.open("edit").setData(row);
      });
    },
    // 删除明细
    async table_del(row) {
      var reqData = { id: row.id };
      var res = await this.$api.dict.delDict.get(reqData);
      if (res.code == 0) {
        this.getDictTable();
        this.$message.success("删除成功");
      } else {
        this.$alert(res.message, "提示", { type: "error" });
      }
    },
    // 本地更新数据
    handleDicSuccess(data, mode) {
      this.getDic();
    },
    // 本地更新数据
    handleListSuccess(data) {
      this.getDictTable();
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val;
      this.page.currentPage = 1;
      this.search.page = 1;
      this.search.limit = val;
      this.getDictTable();
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.search.page = val;
      this.search.limit = this.page.size;
      this.getDictTable();
    },
  },
};
</script>

<style>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}
.custom-tree-node .code {
  font-size: 12px;
  color: #999;
}
.custom-tree-node .do {
  display: none;
}
.custom-tree-node .do i {
  margin-left: 5px;
  color: #999;
  padding: 5px;
}
.custom-tree-node .do i:hover {
  color: #333;
}
.custom-tree-node:hover .code {
  display: none;
}
.custom-tree-node:hover .do {
  display: inline-block;
}
.list-title {
  display: inline-block;
  color: #17233d;
  font-weight: 500;
  font-size: 20px;
  border-left: 5px solid #409eff;
  padding-left: 20px;
}
</style>
